<template>
  <div class="staff-account">
    <div class="account-select">
      <el-form>
        <el-form-item style="margin-bottom:20px">
          <div class="select-dept">
            <el-cascader :options="data" :props="{ value: 'id', label: 'department', children: 'adminDepartments' }" v-model="defaultValue" :show-all-levels="false" filterable change-on-select @change="handleCascader">
            </el-cascader>
          </div>
          <el-dropdown trigger="hover" @command="dropdownStateChange">
            <span class="el-dropdown-link">
              {{dropdownValue}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="state-staff-select">
              <el-dropdown-item :command="{value: null, title: '全部状态'}">
                全部状态
              </el-dropdown-item>
              <el-dropdown-item :command="{value: 1, title: '启用'}">
                启用
              </el-dropdown-item>
              <el-dropdown-item :command="{value: 0, title: '禁用'}">
                禁用
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="input-with-select el-input el-input-group el-input-group--append">
            <input autocomplete="off" placeholder="请输入员工账号/姓名/职位/手机" type="text" rows="2" validateevent="true" class="el-input__inner" v-model="searchKey" @keyup.enter="handelSearch">
          </div>

          <div class="search-button">
            <el-button type="primary" icon="el-icon-search" @click="handelSearch"></el-button>
          </div>

          <el-button type="primary" size="small" style="float: right;" @click="addAccount" v-if="addstaff">新增账号</el-button>
        </el-form-item>
        <el-form-item>
          <el-table :data="tableData" min-height="250" max-height="550">
            <el-table-column prop="account" label="用户名" width="150">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="position" label="职位" width="120">
            </el-table-column>
            <el-table-column prop="dept" label="部门" width="120">
            </el-table-column>
            <el-table-column prop="mobile" label="手机" width="200">
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="200">
            </el-table-column>
            <el-table-column prop="state" label="状态" width="120" :formatter="stateFormat">
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <div class="button-style" v-if="updatestaffstatus">
                  <el-button @click.native.prevent="handleStateClick(scope.row)" type="text" v-if="(scope.row.account !== 'admin')" size="small">
                    {{scope.row.state === "0"? "启用":"禁用"}}
                  </el-button>
                </div>
                <div class="button-style" v-if="updatestaff">
                  <el-button @click.native.prevent="editRow(scope.row.id)" type="text" size="small">
                    修改
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item style="margin-top: 20px;">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, prev , pager , next, sizes, jumper" :total="allPage">
          </el-pagination>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getStaffList, getDeptstaff, setStaffState } from '../../../public/js/setting'
export default {
  name: 'Staff',
  data () {
    return {
      searchKey: null,
      data: [{}],
      dropdownValue: '全部状态',
      defaultValue: [null],
      state: [],
      tableData: [],
      copyData: [],
      pageNum: 1,
      pageSize: 10,
      allPage: 0,
      stateValue: null,
      stateData: null,
      dept: null,
      suppliersUserId: null
    }
  },
  created () {
    this.getStaffLists()
    window.commo.showMenu(this)
  },
  mounted () {
    getDeptstaff().then(res => {
      if (res.data.errCode === 0) {
        const deptArray = Array.from(res.data.adminDepartments)
        this.data = res.data.adminDepartments
        this.data.unshift({ adminDepartments: null, id: null, department: '全部部门' })
        window.bus.$emit('departMentBackData', deptArray)
      }
    })
  },
  methods: {
    handleCascader (val) {
      this.dept = parseInt(val[val.length - 1])
      this.getStaffLists()
    },
    handelSearch () {
      this.getStaffLists()
    },
    editRow (id) {
      console.log(id)
      // alert(111)
      // sessionStorage.getItem('accountID')
      sessionStorage.setItem('accountID', id)
      this.$router.push('/index/edit_account')
    },
    dropdownStateChange (data) {
      this.stateValue = data.value
      this.getStaffLists()
      this.dropdownValue = data.title
    },
    // 操作修改酒店状态
    setStates (row) {
      let state = row.state === '0' ? '1' : '0'
      let stateData = {
        'timestamp': 0,
        'version': 'string',
        'operation': 'string',
        'adminUserId': row.id,
        'state': state
      }
      setStaffState(stateData).then(res => {
        if (!res.data.errCode) {
          this.$message.success('修改成功')
          row.state = row.state === '0' ? '1' : '0'
        } else {
          this.$message.error(res.data.errMsg)
        }
      })
    },
    // 修改状态
    handleStateClick (row) {
      // console.log(row.state = 0)
      this.$confirm('此操作将禁用该员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.setStates(row)
      }).catch(() => {
      })
      // row.state = row.state ? 0 : 1
      // return row.state ? '0' : '1'
    },
    // 格式化状态
    stateFormat (row, column) {
      let state = row[column.property]
      return state === '1' ? '启用' : '禁用'
    },
    getStaffLists () {
      let data = {
        'timestamp': 0,
        'version': 'string',
        'operation': 'string',
        'pageSize': this.pageSize,
        'pageNum': this.pageNum,
        'departmentId': this.dept,
        'state': this.stateValue,
        'search': this.searchKey || null
      }
      getStaffList(data).then(res => {
        if (res.data.errCode === 0) {
          this.tableData = res.data.adminUserEntities
          this.allPage = res.data.total
        }
      })
    },
    handleSizeChange (val) {
      this.pageSize = this.allPage = val
      this.getStaffLists()
    },
    handleCurrentChange (val) {
      this.pageNum = val
      this.getStaffLists()
    },
    addAccount () {
      this.$router.push('/index/add_account')
    }
  }
}
</script>
<style lang="scss" scoped>
.button-style {
  float: left;
  width: 50%;
}
.select-dept span {
  font-size: 12px;
  line-height: 34px;
}
.el-dropdown {
  line-height: 35px;
}
.el-dropdown,
.input-with-select,
.select-dept {
  float: left;
}
.search-button {
  margin-left: 20px;
  float: left;
  .el-button {
    padding: 9px 20px;
  }
}
.staff-account {
  .account-select {
    .el-form {
      .el-form-item {
        .el-form-item__content {
          .el-dropdown {
            margin-right: 30px;
          }
          /*搜索input样式*/
          .el-input {
            width: 400px;
            input {
              height: 34px;
              line-height: 34px;
            }
            .el-input-group__append {
              padding: 0 14px;
              .el-button {
                margin: -14px;
              }
              button {
                padding: 8px 9px;
              }
            }
          }
        }
      }
    }
  }
 
}
</style>
